<template>
  <div class="headers">
    <Header />
    <ul>
      <li>
        <div>综合</div>
      </li>
      <li>
        <div>销量</div>
      </li>
      <li>
        <div>新品</div>
      </li>
      <li>
        <div>价格</div>
      </li>
    </ul>

    <section>
      <ul>
        <li v-for="(i,k) in list" :key="k">
          <img :src="getRequire(i.imgUrl)" alt="" />
          <h3>{{ i.msg }}</h3>
          <div class="price">
            <div>
              <span>￥</span>
              <b>{{ i.price }}</b>
            </div>
            <div>{{ i.sign }}</div>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import Header from "@/components/search/header.vue";
import { ref } from "vue";
const list = ref([
    {
        imgUrl: 'list-1.webp',
        msg: '拉链连帽衫大码女下级遮肚子显瘦短袖t恤mm小众正肩上衣',
        price: '199',
        sign: '666☆'
    },{
        imgUrl: 'list-2.webp',
        msg: '拉链连帽衫大码女下级遮肚子显瘦短袖t恤mm小众正肩上衣',
        price: '199',
        sign: '666☆'
    },{
        imgUrl: 'list-3.webp',
        msg: '拉链连帽衫大码女下级遮肚子显瘦短袖t恤mm小众正肩上衣',
        price: '199',
        sign: '666☆'
    },{
        imgUrl: 'list-4.webp',
        msg: '拉链连帽衫大码女下级遮肚子显瘦短袖t恤mm小众正肩上衣',
        price: '199',
        sign: '666☆'
    }
])
</script>

<style scoped>
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 150vh;
  overflow: hidden;
}

.headers ul {
  display: flex;
  justify-content: space-around;
  padding: 0.2rem 0;
  font-size: 0.426666rem;
  background-color: #fff;
}

.headers ul li {
  display: flex;
  align-items: center;
}

.headers ul li > div {
  padding: 0 0.08rem;
}

section {
  flex: 1;
  overflow: hidden;
}

section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 50%;
  padding: 0.266666rem;
}

section ul li img {
  width: 4.533333rem;
  height: 6.533333rem;
}

section ul li h3 {
  width: 100%;
  font-size: 0.373333rem;
  color: #222;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #fff;
}

section ul li .price {
  display: flex;
  justify-content: space-between;
  padding: 0.166666rem 0.16666rem;
  width: 100%;
  font-size: 14px;
  background-color: #fff;
}

section ul li .price div:first-child span {
  font-size: 0.32rem;
  color: black;
}
</style>
